<template>
    <div class="rating">
      <div class="title">
        <div class="back-wrapper" @click="popupVisible2=true">
          <back :click="false"></back>
        </div>
        {{filmName}}
      </div>
      <div class="content">
        <div class="rating-score">
          我的评分 <span class="count">{{score/2}}分</span>
        </div>
        <div class="rating-operate">
          <div class="item" v-for="(item,index) in _starType">
            <div class="top" :class="item">
              <div class="top-left" @click="_setRatingStar(2*index+1)"></div>
              <div class="top-right" @click="_setRatingStar(2*index+2)"></div>
            </div>
            <div class="bottom" :class="item">{{classText[index]}}</div>
          </div>
        </div>
        <div class="rating-text-wrapper">
          <textarea class="rating-text" name="" id="" cols="30" rows="10" placeholder="写下对这部影片的想法吧" v-model="desc"></textarea>
        </div>
        <mt-popup
          v-model="popupVisible"
          popup-transition="popup-fade">
          <div class="tip-wrapper">
            <div class="top border-1px">
              {{msg}}
            </div>
            <div class="bottom" @click="_back(msg)">确定</div>
          </div>
        </mt-popup>
        <mt-popup
          v-model="popupVisible2"
          popup-transition="popup-fade">
          <div class="tip-wrapper2">
            <div class="top border-1px">
              本次编辑的内容尚未发布，确定退出吗？
            </div>
            <div class="bottom" >
              <div class="left" @click="_back">确定</div>
              <div class="right" @click="popupVisible2=false">取消</div>
            </div>
          </div>
        </mt-popup>
        <div class="btn-wrapper">
          <button class="smt" @click="_rating">发布</button>
        </div>
      </div>
    </div>
</template>

<script>
  const CLS_ON = 'on'
  const CLS_OFF = 'off'
  const CLS_HALF = 'half'
  const LENGTH = 5
  import { Popup,Toast } from 'mint-ui';
  import back from '../../../components/back/back'
  import {getStorage} from "../../../common/js/localStorage";
  import global from '../../../common/js/global'
    export default {
        name: "rating",
        data(){
          return{
            filmName:'',
            score:10,
            popupVisible:false,
            popupVisible2:false,
            msg:'',
            desc:''
          }
        },
        created(){
          this.classText = ['极差','较差','一般','不错','很棒']
        },
        mounted(){
          console.log(this._starType)
          this.filmName = this.$route.query.name
        },
        components:{
          'back':back
        },
        methods:{
          _back(){
            window.history.go(-1)
            this.popupVisible=false
          },
          _rating(){
            if(this.desc===''){
              Toast('请输入评论')
              return
            }
            this.$axios(
              {
                method: 'post',
                headers: {
                  "Content-Type": "application/json",
                  "MOBILE-DEVICE": 'PSD_H5_1_MPS',
                  "JSESSIONID": getStorage('userInfo') ? getStorage('userInfo').JSESSIONID : ''
                },
                url: global.$host+'/member/scoreComment',
                data: {
                  filmId:this.$route.query.id,
                  starNumScore:this.score/2,
                  content:this.desc,
                  channelCode:'PSD_H5_1_MPS'
                }
              }
            ).then((res) => {
              if (res.status === global.ERR_OK) {
                if (res.data.code === 0) {
                  this.msg = res.data.data.msg
                  this.popupVisible=true
                } else {
                  this.msg = res.data.errorMsg
                  this.popupVisible=true
                }
              } else {
                Toast('服务器错误,错误代码:' + res.status)
              }
            });
          },
          _back(){
            window.history.back(-1)
          },
          _setRatingStar(score){
            if(score===this.score){
              this.score = this.score -1
            }else if(score>this.score){
              this.score = score
            }else if(score<this.score){
              this.score = score
            }
          }
        },
        computed:{
          _starType(){
            let result = [];
            let score = Math.floor(this.score)/2;
            let hasDecimal = score%1!==0;
            let integer = Math.floor(score);
            for(let i=0;i<integer;i++){
              result.push(CLS_ON)
            }
            if(hasDecimal){
              result.push(CLS_HALF)
            }
            while (result.length<LENGTH){
              result.push(CLS_OFF)
            }
            return  result;
          }
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/mixin.styl"
  .rating
    user-select: none
    height calc(100% - 18px)
    color #ffffff
    background #101011
    .tip-wrapper2
      width 260px
      height 140px
      background #FFD548
      border-radius 8px
      .top
        height 41px
        padding 36px 32px 21px 32px
        line-height 23px
        color #161719
        font-size 14px
        border-1px(#DDB632)
      .bottom
        display flex
        height 41px
        line-height 41px
        color #333333
        font-size 16px
        .left,.right
          flex 1
        .left
          border-right 1px solid #DDB632
    .tip-wrapper
      width 260px
      height 140px
      background #FFD548
      border-radius 8px
      .top
        height 98px
        line-height 98px
        color #161719
        font-size 14px
        border-1px(#DDB632)
      .bottom
        height 41px
        line-height 41px
        color #333333
        font-size 16px
    .mint-popup
      background none
    .title
      position relative
      margin-top 10px
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      padding-bottom 20px
      .back-wrapper
        position absolute
        left 0
        top 0
        width 36px
        height 22px
    .content
      height calc(100% - 34px)
      text-align center
      overflow hidden
      .rating-score
        margin-top 18px
        text-align center
        height 17px
        line-height 17px
        color #ACB1BB
        font-size 12px
        .count
          color #F7C20F
      .rating-operate
        width 210px
        margin 14px auto 0 auto
        display flex
        .item
          flex 1
          margin 0 9px
          text-align center
          .top
            display flex
            margin 0 auto
            height 22px
            width 22px
            background #ffffff
            .top-left,.top-right
              flex 1
            &.on
              background url("icon_star2.svg") no-repeat center center/22px 22px
            &.half
              background url("icon_star3.svg") no-repeat center center/22px 22px
            &.off
              background url("icon_star1.svg") no-repeat center center/22px 22px
          .bottom
            margin-top 6px
            width 24px
            font-size 12px
            height 17px
            line-height 17px
            color #ACB1BB
            &.on
              color #F7C20F
            &.half
              color #F7C20F

      .rating-text-wrapper
        padding 31px 10px 0 10px
        .rating-text
          padding 19px 21px
          border none
          width calc(100% - 42px)
          height 254px
          background #171718
          font-size 14px
          color #ffffff
          outline none
          resize none

      .btn-wrapper
        height 44px
        margin-top 22px
        padding 0 10px
        .smt
          width 100%
          height 44px
          border none
          background #F7C20F
          color #161719
          font-size 16px
          border-radius 4px
</style>
